<template>
    <div class="ett-log-panel">
        <div class="ett-log-item" v-for="item of shownLogItems" :key="item">
            {{ item }}
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, computed, reactive, defineExpose } from "vue"
export type LogItemType = { name: string, type: string, time: number, data: { [key: string]: any } }
const logItems: LogItemType[] = []

// 根据键值对的情况，将日志进行解析
const formatLog = (item: LogItemType) => {
    const formattedProperties = []
    // 列举obj对象的全部属性
    for (const key in item.data) {
        if (key !== "type" && key !== "name") {
            formattedProperties.push(`${key}=${(item as any)[key]}`)
        }
    }
    // 将formattedProperties数组中的元素以逗号分隔，并返回
    return `${item['name']}:${item.data['type']}@${item['time']}: ${formattedProperties.join(", ")}`
}

const shownLogItems = computed(() => {
    return logItems.slice(logItemsRange.start, logItemsRange.end).map(formatLog)
})
const logItemsShowRange = ref(10)
const logItemsRange = reactive({
    start: -1,
    end: -1
})

const addLogItem = (item: LogItemType) => {
    logItems.push(item)
    logItemsRange.start = Math.max(0, logItems.length - logItemsShowRange.value)
    logItemsRange.end = logItems.length
}
defineExpose({
    addLogItem
})
</script>
<style>
.ett-log-panel {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    overflow-x: auto;
}

.ett-log-item {}
</style>